import React from 'react'
import Image from "next/image";
import Link from "next/link"
import fetchApi from '../util/fetchApi';
import { prisma } from '../util/prisma';

export default async function ArticleCard() {
  const res2 = await fetch('http://localhost:3000/api/list', { 
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ 
      title: 'title',
      content: 'content',
      view: 12,
      createTime: '2023-02-03',
      tag: 'vue, react'
    }),
  })
  const res = await fetchApi('/api/list')
  console.log(res)
  return (
    <>
      <>
        <div className="flex max-w-5xl h-52 bg-white mb-4 p-6 rounded-lg">
          <div className="mr-12 mb-8 border-b-4 border-sky-200">
            <div className="flex flex-col items-center w-32">
              <span>21</span>
              <span>2023年6月</span>
            </div>
          </div>
          <div>
            <div className="cursor-pointer">
              写技术博客，质量和数量该如何保证？
            </div>
            <div className="py-2">
              <span>koa</span><span>vue</span>
            </div>
            <div>
              <div className="h-12 mb-4 overflow-hidden text-allipsis">
                自接触编程以来已经有13个年头了，在2010年参加培训的时候，受到老师的影响，在 CSDN 上开通了博客，开始了写作之旅。当时的写作好像很简单，把自己在课上学到的、以及平时遇到的问题总结一下，就有不少人看。后来因为工作原因，没有时间写就荒废了，就这么断断续续的十几年来，博客似乎越来越难写。从事软件开发的越来越多，博客平台的文章也越来越多，导致了竞争非常大，如果不是特别优质的内容，是跟本没有任何访问量的，再加上现在的内容平台太多了，有公众号，头条这种通用的，也有 CSDN、SF、掘金这种技术专业的，每个平台的推荐算法又不一样，都要研究一下就太累了。
              </div>
              <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Image 
                      width={25} 
                      height={18}
                      src="/static/view.png"
                      alt=""
                    />
                    <span className="pl-4">530</span>
                  </div>
                  <Link href="/article/1" className="px-5 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">阅读全文</Link>
              </div>
            </div>
          </div>
        </div>
        <div className="flex max-w-5xl h-52 bg-white mb-4 p-6 rounded-lg ">
          <div className="mr-12 mb-8 border-b-4 border-sky-200">
            <div className="flex flex-col items-center w-32">
              <span>21</span>
              <span>2023年6月</span>
            </div>
          </div>
          <div>
            <div className="cursor-pointer">
              写技术博客，质量和数量该如何保证？
            </div>
            <div className="py-2">
              <span>koa</span><span>vue</span>
            </div>
            <div>
              <div className="h-12 mb-4 overflow-hidden text-allipsis">
                自接触编程以来已经有13个年头了，在2010年参加培训的时候，受到老师的影响，在 CSDN 上开通了博客，开始了写作之旅。当时的写作好像很简单，把自己在课上学到的、以及平时遇到的问题总结一下，就有不少人看。后来因为工作原因，没有时间写就荒废了，就这么断断续续的十几年来，博客似乎越来越难写。从事软件开发的越来越多，博客平台的文章也越来越多，导致了竞争非常大，如果不是特别优质的内容，是跟本没有任何访问量的，再加上现在的内容平台太多了，有公众号，头条这种通用的，也有 CSDN、SF、掘金这种技术专业的，每个平台的推荐算法又不一样，都要研究一下就太累了。
              </div>
              <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Image 
                      width={25} 
                      height={18}
                      src="/static/view.png"
                      alt=""
                    />
                    <span className="pl-4">530</span>
                  </div>
                  <div className="px-5 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">阅读全文</div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex max-w-5xl h-52 bg-white mb-4 p-6 rounded-lg ">
          <div className="mr-12 mb-8 border-b-4 border-sky-200">
            <div className="flex flex-col items-center w-32">
              <span>21</span>
              <span>2023年6月</span>
            </div>
          </div>
          <div>
            <div className="cursor-pointer">
              写技术博客，质量和数量该如何保证？
            </div>
            <div className="py-2">
              <span>koa</span><span>vue</span>
            </div>
            <div>
              <div className="h-12 mb-4 overflow-hidden text-allipsis">
                自接触编程以来已经有13个年头了，在2010年参加培训的时候，受到老师的影响，在 CSDN 上开通了博客，开始了写作之旅。当时的写作好像很简单，把自己在课上学到的、以及平时遇到的问题总结一下，就有不少人看。后来因为工作原因，没有时间写就荒废了，就这么断断续续的十几年来，博客似乎越来越难写。从事软件开发的越来越多，博客平台的文章也越来越多，导致了竞争非常大，如果不是特别优质的内容，是跟本没有任何访问量的，再加上现在的内容平台太多了，有公众号，头条这种通用的，也有 CSDN、SF、掘金这种技术专业的，每个平台的推荐算法又不一样，都要研究一下就太累了。
              </div>
              <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Image 
                      width={25} 
                      height={18}
                      src="/static/view.png"
                      alt=""
                    />
                    <span className="pl-4">530</span>
                  </div>
                  <div className="px-5 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">阅读全文</div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex max-w-5xl h-52 bg-white mb-4 p-6 rounded-lg ">
          <div className="mr-12 mb-8 border-b-4 border-sky-200">
            <div className="flex flex-col items-center w-32">
              <span>21</span>
              <span>2023年6月</span>
            </div>
          </div>
          <div>
            <div className="cursor-pointer">
              写技术博客，质量和数量该如何保证？
            </div>
            <div className="py-2">
              <span>koa</span><span>vue</span>
            </div>
            <div>
              <div className="h-12 mb-4 overflow-hidden text-allipsis">
                自接触编程以来已经有13个年头了，在2010年参加培训的时候，受到老师的影响，在 CSDN 上开通了博客，开始了写作之旅。当时的写作好像很简单，把自己在课上学到的、以及平时遇到的问题总结一下，就有不少人看。后来因为工作原因，没有时间写就荒废了，就这么断断续续的十几年来，博客似乎越来越难写。从事软件开发的越来越多，博客平台的文章也越来越多，导致了竞争非常大，如果不是特别优质的内容，是跟本没有任何访问量的，再加上现在的内容平台太多了，有公众号，头条这种通用的，也有 CSDN、SF、掘金这种技术专业的，每个平台的推荐算法又不一样，都要研究一下就太累了。
              </div>
              <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Image 
                      width={25} 
                      height={18}
                      src="/static/view.png"
                      alt=""
                    />
                    <span className="pl-4">530</span>
                  </div>
                  <div className="px-5 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">阅读全文</div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex max-w-5xl h-52 bg-white mb-4 p-6 rounded-lg ">
          <div className="mr-12 mb-8 border-b-4 border-sky-200">
            <div className="flex flex-col items-center w-32">
              <span>21</span>
              <span>2023年6月</span>
            </div>
          </div>
          <div>
            <div className="cursor-pointer">
              写技术博客，质量和数量该如何保证？
            </div>
            <div className="py-2">
              <span>koa</span><span>vue</span>
            </div>
            <div>
              <div className="h-12 mb-4 overflow-hidden text-allipsis">
                自接触编程以来已经有13个年头了，在2010年参加培训的时候，受到老师的影响，在 CSDN 上开通了博客，开始了写作之旅。当时的写作好像很简单，把自己在课上学到的、以及平时遇到的问题总结一下，就有不少人看。后来因为工作原因，没有时间写就荒废了，就这么断断续续的十几年来，博客似乎越来越难写。从事软件开发的越来越多，博客平台的文章也越来越多，导致了竞争非常大，如果不是特别优质的内容，是跟本没有任何访问量的，再加上现在的内容平台太多了，有公众号，头条这种通用的，也有 CSDN、SF、掘金这种技术专业的，每个平台的推荐算法又不一样，都要研究一下就太累了。
              </div>
              <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Image 
                      width={25} 
                      height={18}
                      src="/static/view.png"
                      alt=""
                    />
                    <span className="pl-4">530</span>
                  </div>
                  <span  className="px-5 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">阅读全文</span>
              </div>
            </div>
          </div>
        </div>
      </>
      <div className="flex justify-between mt-6">
        <span className="px-8 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">上一页</span><span className="px-8 py-2 bg-blue-400 text-white rounded-lg cursor-pointer">下一页</span>
      </div>
    </>
  )
}
